<template>
  <div class="yt-list-content">
    <div class="list-operation">
      <div id="completionPaymentEcharts" style="height: 400px;width: 100%;"></div>
      <div class="yt-btn yt-btn-ys" type="primary" @click="exportEchar" style="margin-bottom: 20px">
        {{$t('button.export')}}
      </div>
      <div class="yt-btn yt-ml8" type="primary" style="margin-left: 12px" @click="setUp">{{$t('button.set')}}</div>
      <el-table :data="list" :empty-text="$t('placeholder.emptyText')" class="yt-table" style="width: 100%" v-loading="loading"
                :element-loading-text="$t('buPieChart.loading')" max-height="600">
        <!--<el-table-column type="index" align="center" :label="$t('buPieChart.completionPayment.index')" width="60"/>-->
        <el-table-column align="center" label="Year" prop="year" v-if="displayBlockNameStr['year']"/>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.recognizedIncome')"
                         v-if="displayBlockNameStr['recognizedIncome']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.recognizedIncome}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.recognizedCost')"
                         v-if="displayBlockNameStr['recognizedCost']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.recognizedCost}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.completedIncome')"
                         v-if="displayBlockNameStr['completedIncome']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.completedIncome}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.completedCost')" v-if="displayBlockNameStr['completedCost']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.completedCost}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.receivable')" v-if="displayBlockNameStr['receivable']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.receivable}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.invoiced')" v-if="displayBlockNameStr['invoiced']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.invoiced}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.uninvoiced')" v-if="displayBlockNameStr['uninvoiced']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.uninvoiced}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.accountPaid')" v-if="displayBlockNameStr['accountPaid']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.accountPaid}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="$t('buPieChart.completionPayment.unaccountPaid')"
                         v-if="displayBlockNameStr['unaccountPaid']">
          <template slot-scope="scope">
            <div v-format="'#,##0'">{{scope.row.unaccountPaid}}</div>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :title="$t('projectRevenue.dataReport.setVisible')" :visible.sync="TableTitleVisible">
        <yt-table-title :blockNameCode="blockNameCode" :displayBlockNameList="displayBlockNameList"
                        @cancel="cancel"></yt-table-title>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import {
    queryCompletionPaymentProgress,
    uploadEchar,
    exportCompletionPaymentProgress
  } from '@/api/pmoReport/buPieChartReport';
  import { queryDisplayBlock } from '@/api/pmoReport/projectRevenue';
  import YtTableTitle from '@/components/yt-table-title/index';
  import echarts from 'echarts'

  export default {
    name: 'completionPayment',
    props: {
      // 查询次数
      query: {
        type: Number,
        default: 0
      },
      listQuery: {
        type: Object,
        default: {}
      }
    },
    components: { YtTableTitle },
    watch: {
      query: {
        handler() {
          this.getData()
        }
      }
    },
    mounted() {
      this.chart = echarts.init(document.getElementById('completionPaymentEcharts'))
      this.getData()
      this.getColumn();
    },
    data() {
      return {
        list: [],
        chart: null,
        loading: false,
        TableTitleVisible: false,
        blockNameCode: 'completionPayment',
        displayBlockNameList: [],
        displayBlockNameStr: {}
      };
    },
    methods: {
      cancel(val) {
        if (val) {
          this.getColumn();
        }
        this.TableTitleVisible = false
      },
      // 获取初始的栏位
      getColumn() {
        const data = {
          tableName: this.blockNameCode,
          userId: this.$store.getters.info.id
        }
        this.getMixinColumn(data)
      },
      getMixinColumn(data) {
        this.displayBlockNameStr = {}
        queryDisplayBlock(data).then(res => {
          if (res.status === 200) {
            this.displayBlockNameList = res.data
            for (const i in this.displayBlockNameList) {
              this.displayBlockNameStr[this.displayBlockNameList[i]] = true
            }
          }
        })
      },
      // 获取弹框的栏位
      setUp() {
        // 设置
        this.TableTitleVisible = true
      },
      exportEchar() {
        const base64Data = this.chart.getDataURL()
        // 生成图片
        uploadEchar({ base64Data }).then(res => {
          if (res.status === 200) {
            // 导出excel表格
            const imgPath = res.data
            const a = document.createElement('a');
            const href = exportCompletionPaymentProgress(this.list, this.$store.getters.info.id, imgPath);
            a.download = Date.now();
            a.href = href;
            a.click();
          }
        })
      },
      getData() {
        this.loading = true
        if (this.chart) {
          this.chart.showLoading({
            text: this.$t('businessObjectives.loading'),
            color: '#409EFF',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.8)' // 背景色
          });
        }
        queryCompletionPaymentProgress(this.listQuery).then(res => {
          const obj = {}
          if (res.data && res.data !== 'null' && res.data.length > 0) {
            this.list = res.data
          }
          if (this.chart) {
            this.chart.hideLoading();
          }
          this.loading = false
          this.list.forEach(item => {
            Object.keys(item).forEach(key => {
              if (!obj[key]) {
                obj[key] = []
              }
              if (obj[key]) {
                obj[key].push(item[key])
              }
            })
          })
          this.initChart(obj)
        })
      },
      initChart(obj) {
        this.chart.setOption({
          color: ['#75d4f7', '#ff9191', '#2707e9', '#ff0000', '#00b0f0', '#23CDAB', '#04D5DA', '#C00000', '#E44D9F'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            data: [obj.year[1] + this.$t('buPieChart.completionPayment.recognizedIncome1'), obj.year[1] + this.$t('buPieChart.completionPayment.recognizedCost1'), this.$t('buPieChart.completionPayment.completedIncome1'), this.$t('buPieChart.completionPayment.completedCost1'), this.$t('buPieChart.completionPayment.receivable'), this.$t('buPieChart.completionPayment.invoiced'), this.$t('buPieChart.completionPayment.uninvoiced'), this.$t('buPieChart.completionPayment.accountPaid'), this.$t('buPieChart.completionPayment.unaccountPaid')]
          },
          // calculable: true,
          xAxis: [
            {
              type: 'category',
              data: obj.year
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: obj.year[1] + this.$t('buPieChart.completionPayment.recognizedIncome1'),
              type: 'bar',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.recognizedIncome
            },
            {
              name: obj.year[1] + this.$t('buPieChart.completionPayment.recognizedCost1'),
              type: 'bar',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.recognizedCost
            },
            {
              name: this.$t('buPieChart.completionPayment.completedIncome1'),
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.completedIncome
            },
            {
              name: this.$t('buPieChart.completionPayment.completedCost1'),
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.completedCost
            },
            {
              name: this.$t('buPieChart.completionPayment.receivable'),
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.receivable
            },
            {
              name: this.$t('buPieChart.completionPayment.invoiced'),
              type: 'bar',
              barGap: 0,
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.invoiced
            },
            {
              name: this.$t('buPieChart.completionPayment.uninvoiced'),
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.uninvoiced
            },
            {
              name: this.$t('buPieChart.completionPayment.accountPaid'),
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.accountPaid
            },
            {
              name: this.$t('buPieChart.completionPayment.unaccountPaid'),
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'inside',
                  formatter(p) {
                    return String(p.value).replace(/\d{1,3}(?=(\d{3})+(\.|$))/g, '$&,')
                  }
                }
              },
              data: obj.unaccountPaid
            }
          ]
        })
      }
    }
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  .title_select {
    float: right;
    padding-right: 20px;
  }
</style>
